.#{$namespace}-aside {
  .#{$namespace}-aside.collapse,
  .#{$namespace}-menu--collapse {
    --#{$namespace}-menu-base-level-padding: 4px;

    width: var(--#{$namespace}-aside-width-collapse);
  }

  &.aside__maia-default {
    color: var(--maia-menu-text-color);
    background: radial-gradient(155.32% 100% at 0% 0%, #f7fafd 0%, #fbfcfe 25.86%, #fff 100%);

    .maia-system-title {
      color: var(--#{$namespace}-text-color-primary);
    }
  }

  &.aside__maia-blue {
    background: radial-gradient(102.22% 24.02% at 100% 0%, rgb(36 145 255 / 20%) 0%, rgb(0 122 245 / 0%) 100%), radial-gradient(107.5% 39.69% at 50% 100%, #3f91f7 0%, rgb(0 127 255 / 0%) 100%), radial-gradient(62.73% 62.73% at 107.5% 37.27%, #2478e4 0%, #007af5 100%),;
  }

  &.aside__maia-cerulean {
    background: radial-gradient(100% 31.53% at 100% 0%, #3a5ec9 0%, rgb(50 85 189 / 0%) 100%), radial-gradient(107.5% 39.69% at 50% 100%, #4664bf 0%, rgb(65 97 193 / 0%) 100%), radial-gradient(86.39% 69.26% at 136.39% 30.74%, #3a58b7 0%, #3154bc 100%),;
  }

  &.aside__maia-indigo {
    background: radial-gradient(88.33% 20.76% at 96.39% 1.31%, #2b4d7c 0%, rgb(44 58 96 / 0%) 100%), radial-gradient(107.5% 39.69% at 50% 100%, #2b4d7c 0%, rgb(44 58 96 / 0%) 100%), radial-gradient(322.5% 75.78% at 119.17% 24.22%, #2b4d7c 0%, #2c3a60 100%),;
  }

  &.aside__maia-orange {
    background: radial-gradient(120.28% 28.26% at 100% 1.63%, #fa7d01 0%, rgb(247 102 0 / 0%) 100%), radial-gradient(107.5% 39.69% at 50% 100%, #fa7d01 0%, rgb(247 102 0 / 0%) 100%), radial-gradient(65% 70.89% at 115% 29.11%, #f27b2c 0%, #f76600 100%),;
  }

  &.aside__maia-blue,
  &.aside__maia-cerulean,
  &.aside__maia-indigo,
  &.aside__maia-orange {
    color: var(--maia-menu-text-color-sub);
    // 竖向菜单
    .#{$namespace}-menu--vertical {
      .#{$namespace}-sub-menu {
        .#{$namespace}-menu-item {
          color: var(--maia-menu-text-color-sub);

          &::before {
            background-color: rgb(255 255 255 / 20%);
          }
        }
      }
      .#{$namespace}-menu-item,
      .#{$namespace}-sub-menu__title {
        color: var(--maia-menu-text-color-sub);
      }
      .#{$namespace}-menu-item:hover,
      .#{$namespace}-sub-menu__title:hover {
        @include sub-background-active;
      }
      .#{$namespace}-menu-item {
        &.is-active {
          font-weight: var(--#{$namespace}-font-weight-primary);
          color: var(--#{$namespace}-color-white);

          @include sub-background-active;

          &::after {
            @include sub-vertical-common-active;
          }
        }
      }

      .#{$namespace}-sub-menu {
        .#{$namespace}-menu-item {
          &.is-active {
            font-weight: var(--#{$namespace}-font-weight-primary);
            color: var(--#{$namespace}-color-white);

            @include sub-background-active;

            &::after {
              @include sub-vertical-common-active;

              top: 6px;
              left: 24px;
              height: 24px;
            }
          }
        }

        &:not(.is-opened) {
          &.is-active {
            .#{$namespace}-sub-menu__title {
              font-weight: var(--#{$namespace}-font-weight-primary);
              color: var(--#{$namespace}-color-white);

              @include sub-background-active;

              &::before {
                @include sub-vertical-common-active;
              }
            }
          }
        }
      }
    }

    // 解决竖向菜单collapse时，选中菜单父节点没有高亮问题
    .#{$namespace}-menu--collapse {
      .#{$namespace}-sub-menu {
        &.is-active {
          .#{$namespace}-sub-menu__title {
            opacity: 0.5;

            @include sub-background-active;

            &::before {
              @include sub-vertical-common-active;
            }
          }
        }
      }
    }

    .maia-system-title {
      color: var(--#{$namespace}-color-white);
    }
  }
}
